<template>
  <tm-app ref="app">
    <tm-navbar :title="data.title"></tm-navbar>
    <tm-tabs
      :list="memberTypeList"
      align="around"
      :default-name="data.tabActive"
      :active-name="data.tabActive"
      activeColor="primary"
      activeFontColor="primary"
      _class="text-weight-b"
      itemModel="line"
      :showTabsLineAni="true"
      :width="750"
      @change="tabChanged"
    >
    </tm-tabs>
    <tm-sheet :margin="[0]" v-if="data.isLoading" class="flex1">
      <tm-skeleton-line :height="50"></tm-skeleton-line>
      <tm-skeleton-line :height="50"></tm-skeleton-line>
      <tm-skeleton-line :height="50"></tm-skeleton-line>
      <tm-skeleton-line :height="50"></tm-skeleton-line>
      <tm-skeleton-line :height="50"></tm-skeleton-line>
      <tm-skeleton-line :height="50"></tm-skeleton-line>
    </tm-sheet>
    <TmScrolly class="from-content" v-else>
      <personList
        :setList="data.listInfo"
        v-if="data.tabActive === 'members' && data.listInfo.length > 0"
        @btnClick="goMenu"
      ></personList>
      <tm-sheet v-else :margin="[0]">
        <tm-result
          :showBtn="false"
          subTitle=" "
          title="暂无数据"
        ></tm-result>
      </tm-sheet>
    </TmScrolly>
    <view class="flex flex-row to-bottom" v-if="data.tabActive === 'members'">
      <view class="flex-1 mr16">
        <tm-button
          form-type="submit"
          icon="tmicon-plus"
          label="添加好友"
          color="#366EF4"
          @click="menuClick"
          block
        ></tm-button>
      </view>
      <view class="flex-1 mr16">
        <tm-button
          form-type="submit"
          icon="tmicon-plus"
          label="添加权限"
          color="#DCDCDC"
          fontColor="#15181D"
          outlined
          block
        ></tm-button>
      </view>
      <view class="flex-1">
        <tm-button
          form-type="submit"
          icon="tmicon-ellipsis-vertical"
          label=""
          outlined
          fontColor="#15181D"
          color="#DCDCDC"
          block
        ></tm-button>
      </view>
    </view>
  </tm-app>

  <formModal
    :show="show"
    :className="'center'"
    @close="close"
    :menuInfo="menuInfo!"
  />
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'
import { reactive, ref } from 'vue'
import * as config from '../config/menuOperate'
import personList from '../components/personList.vue'
import { memberTypeList } from '../config/config'
// import { InfoPortal } from '@/pages/Home/common/portalType'
import { InfoPortal } from '../../Home/common/portalType'
import formModal from '../../../components/customModal/formModal.vue'
import relation from '../common/relation'

const data = reactive<any>({
  listInfo: [],
  memberLength: 0,
  itemType: '',
  title: '',
  tabActive: 'members',
  isLoading: true,
})
let show = ref<boolean>(false)
let menuInfo = ref<InfoPortal>()
onLoad(async query => {
  if (query && query.item) {
    let item = JSON.parse(query.item)
    data.itemType = item.itemType
    data.title = item.title+'的'+item.label
    memberTypeList[0].title = item.label
    let res = await config.loadSettingMenu()
    if (item.itemType === 'member') {
      findObject(res.children, item.key)
    } else {
      findObject(res.children, item.key)
    }
  }
})

const menuClick = () => {
  // menuInfo.value = info
  menuInfo.value = relation.getSingleMode()
  openModal()
}
/** 打开弹窗 */
const openModal = () => {
  show.value = true
}

const close = () => {
  show.value = false
}

async function findObject(arr: any[], key: any) {
  arr.forEach(item => {
    if (item.key === key) {
      getMenuList(item)
    }
    if (item.children && item.children.length > 0) {
      findObject(item.children, key)
    }
  })
}
async function getMenuList(obj: {
  item: { directory: { memberDirectory: any }; target: { members: any[] } }
  children: any[]
}) {
  uni.showLoading({
    title: '加载中...'
  })
  let arr: {
    label: any
    itemType: any
    icon: any
    remark: any
    isShow: boolean
    key: any
    code: any
    createTime: any
    updateTime: any
  }[] = []
  obj.item.target?.members?.forEach(element => {
    let icon: any = null
    try {
      icon = JSON.parse(element.icon)
    } catch {
      icon = ''
    }
    let obj = {
      label: element.name,
      itemType: element.typeName,
      icon: icon.thumbnail,
      remark: element.remark,
      isShow: false,
      key: element.key,
      code: element.code,
      createTime: element.createTime,
      updateTime: element.updateTime
    }
    arr.push(obj)
  })
  data.listInfo = arr
  setTimeout(() => {
    uni.hideLoading()
    data.isLoading = false
  }, 500)
}

function tabChanged(key: string) {
  data.tabActive = key
}

async function goMenu(item: { label: any; type: any; mainKey: any; itemType: any; code: any; createTime: any; updateTime: any; remark: any; }) {
  const params = {
    name: item.label,
    typeName: item.itemType,
    code: item.code,
    createTime: item.createTime,
    updateTime:item.updateTime,
    remark: item.remark
  }
  // if(type === 'menuDetail'){
  uni.navigateTo({
    url: '/pages/relation/menuDetail?item=' + JSON.stringify(params)
  })
  // }
}
</script>

<style lang="scss">
@import '../../../common/style/global.scss';
.from-content {
  height: calc(100vh - 230px);
  overflow-y: scroll;
}
.to-bottom {
  padding: 0px 10px;
  background-color: #fff;
  height: 100px;
  display: flex;
  align-items: center;
}
.mr16 {
  margin-right: 16px;
}
.flex1 {
  flex: 1;
}
</style>
